<template>
  <div class="container">
    <div class="guide_b">
      <div class="item item1">
        <div class="title">在线咨询</div>
        <div class="text">
          <p>7×24小时实时在线咨询</p>
          <p>强大的人工智能机器人“亮亮”竭诚为您服务</p>
        </div>
        <a href="" class="to_counsel">立即使用</a>
      </div>
      <div class="item item3">
        <div class="title">微信/微博咨询</div>
        <div class="text">
          <p>最新政策动态，当下成都热点，乐政优惠活动</p>
          <p>还有更多好玩的粉丝福利活动~立刻扫描关注↓↓</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.guide_b {
  margin: 40px auto;
  width: 1000px;
  height: 600px;
  padding: 0 0 0 295px;
  box-sizing: border-box;
  background: url(../../static/images/lzapp.png) no-repeat center left;
}

.item {
  float: left;
  margin: 110px 0 0 92px;
  width: 260px;
  height: 395px;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.item .title {
  margin-top: 40px;
  font-size: 20px;
  color: #888;
  font-weight: bold;
  text-align: center;
}

.item .text {
  margin-top: 155px;
  padding: 0 20px; 
  font-size: 14px;
  color: #666;
}

.item .text p {
  line-height: 25px;
}

.to_counsel {
  display: block;
  margin: 25px auto 0;
  width: 88px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #e82822;
  border-radius: 4px;
  text-align: center;
  color: #e82822;
  font-size: 14px;
}

.item1 {
  background: url(../../static/images/icon_01.png) no-repeat center;
  background-position-y: 110px;
}

.item2 {
  background: url(../../static/images/icon_02.png) no-repeat center;
  background-position-y: 110px;
}

.item3 {
  background: url(../../static/images/icon_03.png) no-repeat center;
  background-position-y: 110px;
}
</style>

